<template>
	<view class="search_bigBox">
		<view class="index_search">
			<!-- 头部搜索-推荐-轮播图 -->
			<view class="hd_search">
				<navigator url="../../pages/childPage/search/search" class="search_swiper">
					<!--    -->
					<swiper class="swiper_list" :disable-touch="true" :autoplay="true" :circular="true" :vertical="true"
						:duration="600" :interval="3500">
						<swiper-item class="swiper_item" v-for="item,index in swiperArray" :key="index">
							{{item.name}}
						</swiper-item>
					</swiper>
					<icon class="hd_sousuo" type=search color="#333" size="16" />
				</navigator>
				<!-- 列表项 -->
				<view class="search_sign">
					<navigator url="../../pages/childPage/menuList/menuList">
						<uni-icons type="list" size="30"></uni-icons>
					</navigator>
				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "index-search",
		data() {
			return {
				swiperArray: []
			};
		},

		created() {
			this.getData()
		},
		methods: {
			getData() {
				this.$axios({
					methods: 'get',
					url: 'recipe/search/hot',
					// params:queryParam
				}).then(res => {
					// console.log(this.swiperArray)
					console.log(res)
					this.swiperArray = res.result.suggests
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.search_bigBox {
		width: 100%;
		height: 72rpx;
	}

	.index_search {
		width: 92%;
		height: 62rpx;
		padding: 14rpx 0;
		margin: 0 auto;
		// z-index: -1;


		/* 头部search */
		.hd_search {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.search_swiper {
				width: 84%;
				height: 100%;
				// background: #F5F5F5;
				background: #FFFFFF;
				border-radius: 30rpx;
				overflow: hidden;
				position: relative;

				.hd_sousuo {
					position: absolute;
					top: 50%;
					left: 6%;
					transform: translate(-50%, -50%);
				}

				.swiper_list {
					width: 90%;
					height: 100%;

					.swiper_item {
						width: 100%;
						height: 100%;
						font-size: 20rpx;
						line-height:62rpx;
						color: #333;
						margin-left: 68rpx;
					}
				}

			}

			.search_sign {
				width: 10%;
				// background: #6DD5FA;
			}
		}
	}
</style>
